<template>
	<n-modal v-model:show="modalVisible"
					 @on-close="closeModel"
					 preset="card"
					 :title="title" class="w-700px">
		<n-form ref="formRef" label-placement="left" require-mark-placement="right-hanging" :label-width="80"
						:model="formModel">
			<n-form-item :span="12" label="菜单类型" path="menuType">
				<n-select v-model:value="formModel.menuType" :options="menuTypeList"></n-select>
			</n-form-item>
			<n-form-item :span="12" label="上级菜单" path="parentId">
				<n-tree-select
					:options="props.initSelectData"
					:value="formModel.parentId"
					label-field="menuName"
					key-field="menuId"
					@update:value="handleUpdateValue"
					clearable
				/>
			</n-form-item>
			<n-form-item :span="12" :label="formModel.menuType===1?'菜单名称':'权限名称'" path="menuName">
				<n-input v-model:value="formModel.menuName" clearable/>
			</n-form-item>
			<n-form-item :span="12" label="请求类型" path="methodType" v-if="formModel.menuType===2">
				<n-select
					v-model:value="formModel.methodType"
					placeholder="请选择请求类型"
					:options="generalOptions"
					clearable
				/>
				<!--				<n-input v-model:value="formModel.methodType" clearable/>-->
			</n-form-item>
			<n-form-item :span="12" label="路径权限" path="urlPermission" v-if="formModel.menuType===2">
				<n-input v-model:value="formModel.urlPermission" clearable/>
			</n-form-item>
			<n-form-item :span="12" label="按扭权限" path="btnPermission" v-if="formModel.menuType===2">
				<n-input v-model:value="formModel.btnPermission" clearable/>
			</n-form-item>

			<n-form-item :span="12" label="路由级别" path="component" v-if="formModel.menuType===1">
				<n-select v-model:value="formModel.component" :options="routeOptions" clearable/>
			</n-form-item>
			<n-form-item :span="12" label="路由名称" path="name" v-if="formModel.menuType===1">
				<n-input v-model:value="formModel.name" clearable/>
			</n-form-item>
			<n-form-item :span="12" label="路由路径" path="path" v-if="formModel.menuType===1">
				<n-input v-model:value="formModel.path" clearable/>
			</n-form-item>
			<n-form-item :span="12" label="图标" path="icon" v-if="formModel.menuType===1">
				<n-input v-model:value="formModel.icon" clearable/>
			</n-form-item>
			<n-form-item :span="12" label="排序" path="weight">
				<n-input-number v-model:value="formModel.weight" clearable/>
			</n-form-item>
			<n-space class="w-full pt-16px" :size="24" justify="end">
				<n-button class="w-72px" @click="closeModel">取消</n-button>
				<n-button class="w-72px" type="primary" @click="handleSubmit">确定</n-button>
			</n-space>
		</n-form>
	</n-modal>
</template>

<script setup>
import {reactive, toRefs, onMounted} from "vue";
import {menuTable, menuDetailByMenuId, saveMenu, updateMenu} from "@/service";

const emit = defineEmits((['fetch-data']))
const props = defineProps({
	initSelectData: []
})
const generalOptions = [
	{
		label: "GET",
		value: "GET"
	},
	{
		label: "POST",
		value: "POST"
	},
	{
		label: "DELETE",
		value: "DELETE"
	},
	{
		label: "PUT",
		value: "PUT"
	},
	{
		label: "PATCH",
		value: "PATCH"
	}
]

const state = reactive({
	modalVisible: false,
	title: '新增',
	formModel: {},
	options: [],
	menuTypeList: [
		{
			label: '菜单',
			value: 1
		},
		{
			label: '权限',
			value: 2
		},
	],
	routeOptions: [{
		label: "一级路由",
		value: 'basic',

	},
		{
			label: "二级路由",
			value: 'self',
		}
	],
})

const {formModel, options, routeOptions, title, modalVisible, menuTypeList} = toRefs(state);

const handleUpdateValue = (value, option) => {
	state.formModel.parentId = value;
}

const save = (row) => {
	state.title = '新增'
	state.saveOrUpdateState = 'add'
	state.modalVisible = true;
	state.formModel = {}
	if (row) {
		state.formModel.parentId = row.menuId;
	}
}

const edit = (row) => {
	state.title = '编辑'
	state.saveOrUpdateState = 'update'
	state.modalVisible = true;
	menuDetailByMenuId(row.menuId).then(res => {
		state.formModel = res.data;
	})

}

const handleSubmit = async () => {
	let row = {}
	row.menuName = state.formModel.menuName
	row.menuType = state.formModel.menuType
	row.parentId = state.formModel.parentId || '-1'
	row.weight = state.formModel.weight
	row.menuId = state.formModel.menuId || null
	if (state.formModel.menuType === 1) {
		row.component = state.formModel.component
		row.icon = state.formModel.icon
		row.name = state.formModel.name
		row.path = state.formModel.path
		row.requiresAuth = 0;
	}
	if (state.formModel.menuType === 2) {
		row.methodType = state.formModel.methodType
		row.urlPermission = state.formModel.urlPermission
		row.btnPermission = state.formModel.btnPermission
	}
	if (state.saveOrUpdateState === 'add') {
		await saveMenu(row);
	} else {
		await updateMenu(row);
	}
	emit('fetch-data')
	closeModel()
}


const closeModel = () => {
	state.formModel = {};
	state.modalVisible = false
}


defineExpose({
	save,
	edit
})


</script>

<style scoped>

</style>
